{extend name="apps/common/view/front.tpl" /}
<!--meta-->
{block name="header_meta"}
<title>DaiCuo验证码实例－{:config('common.site_name')}</title>
<meta name="keywords" content="DaiCuo验证码,动态验证码,图形验证码" />
<meta name="description" content="呆错后台管理框架验证码组件（静态验证码与动态验证码）开发实例。" />
{/block}
<!--header-->
{block name="header"}
  {include file="apps/common/view/widget/header.tpl" /}
{/block}
<!--main-->
{block name="main"}
<div class="container pt-2">
  <div class="card mb-3">
    <div class="card-header font-weight-bold">静态验证码调用1</div>
    <div class="card-body">
      <blockquote>直接使用thinkPHP提供的（captcha_img）函数用于img标签的src属性。</blockquote>
      <p class="card-text">{:captcha_img()}</p>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header font-weight-bold">静态验证码调用2</div>
    <div class="card-body">
      <blockquote>给img标签绑定验证码点击切换的监听事件。</blockquote>
      <p class="card-text"><img src="{:captcha_src()}" alt="captcha" data-toggle="captcha"/></p>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header font-weight-bold">静态验证码调用3</div>
    <div class="card-body">
      <blockquote>通过表单生成函数（DcBuildForm）适用于表单内的验证码。</blockquote>
      <p class="card-text">{:DcBuildForm($forms)}</p>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between">
      <font>控制器源码（apps/example/controller/Captcha.php）</font>
      <a class="font-weight-bold text-purple" href="javascript:;" data-toggle="copy" data-clipboard-target="#controller">复制</a>
    </div>
    <div class="card-body" id="controller">
      {:exampleCode('apps/example/controller/Captcha.php')}
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between">
      <font>模板源码（apps/example/theme/default/captcha/index.tpl）</font>
      <a class="font-weight-bold text-purple" href="javascript:;" data-toggle="copy" data-clipboard-target="#view">复制</a>
    </div>
    <div class="card-body" id="view">
      {:exampleCode('apps/example/theme/default/captcha/index.tpl')}
    </div>
  </div>
</div>
{/block}
<!--footer-->
{block name="footer"}
  {include file="apps/common/view/widget/footer.tpl" /}
{/block}